<template>
	<view>
		<uv-navbar leftText="返回" title="修改个人信息" @leftClick="backClick"></uv-navbar>
		<RxLogo></RxLogo>
		<view class="form_class">
			<view class="input_class"><uv-input border="bottom" v-model="userinfo.name"><template v-slot:prefix>
				<uv-text text="医生名称" margin="0 3px 0 0" type="tips"></uv-text></template>
			</uv-input></view>
			<view class="input_class"><uv-input border="bottom" v-model="userinfo.mobile" type="number" maxlength="11"><template v-slot:prefix>
				<uv-text text="医生电话" margin="0 3px 0 0" type="tips"></uv-text></template>
			</uv-input></view>
			
		</view>
		<view class="form_submit_class">
			<view style="width: 70%;margin-left: auto;margin-right: auto;">
				<uv-button :hairline="false" text="修改" color="#2c9c3c" customTextStyle="color: #ffffff;font-size: 28rpx" @click="changeSubmit"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	import RxLogo from '@/components/RxLogo/RxLogo.vue'
	export default {
		components: {
			RxLogo
		},
		data() {
			return {
				userinfo: {}
			}
		},
		created() {
			this.userinfo = this.$store.state.userinfo
		},
		methods: {
			backClick() {
				uni.navigateBack()
			},
			changeSubmit() {
				uni.showToast({ title: '修改中', icon: 'loading' })
				const change_date = {
					userId: this.userinfo.userId,
					name: this.userinfo.name,
					mobile: this.userinfo.mobile,
				}
				this.$api.change_user_info(change_date).then((res) => {
					this.$store.dispatch('set_userinfo', this.userinfo)
					uni.showToast({ title: '修改成功', icon: 'success' })
					uni.navigateBack()
				}).catch(err => {
					console.log('错误', err)
					uni.showToast({ title: '服务错误', icon: 'error' })
				});
			}
		}
	}
</script>

<style>
	.form_class {
		width: 85%;
		margin-top: 15%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
	}
	
	.input_class {
		margin-bottom: 8px;
	}
	
	.form_submit_class {
		margin-top: 10%;
		margin-left: auto; /* 左侧外边距自动调整为最大值 */
		margin-right: auto;/* 右侧外边距自动调整为最大值 */
	}
</style>
